<template>
  <base-view :model="query" class="custom" @submit="search">
    <template v-slot:params>
      <a-col :span="8">
        <a-form-model-item label="拓展经理角色">
          <a-select
            v-model="query.roleType"
            @change="(value) => queryChange(value, 'roleType')"
            placeholder="请选择"
          >
            <a-select-option value="40"> 40-拓展经理 </a-select-option>
            <a-select-option value="41">41-拓展经理审核员</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="姓名">
          <a-input  placeholder="输入姓名" v-model="query.managerName" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="手机号">
          <a-input  placeholder="输入手机号" v-model="query.managerPhone" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="员工号">
          <a-input  placeholder="输入员工号" v-model="query.managerId" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="操作状态">
          <a-select
            v-model="query.userStatus"
            @change="(value) => queryChange(value, 'userStatus')"
            placeholder="请选择"
          >
            <a-select-option value="00"> 正常 </a-select-option>
            <a-select-option value="01">注销</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="10">
        <a-form-model-item label="收单机构类型">
          <a-select
            v-model="query.signInstType"
            @change="(value) => queryChange(value, 'signInstType')"
            placeholder="请选择"
          >
            <a-select-option value="BANK"> 银行 </a-select-option>
            <a-select-option value="AGENT">代理商</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <br/>
      <a-col :span="8">
        <a-form-model-item v-if="query.signInstType" label="收单机构">
        <a-select
          label="收单机构"
          inputType="select"
          v-model="query.signInstIdOrg"
          prop="signInstIdOrg"
          @change="(value) => queryChange(value, 'signInstIdOrg')"
          v-if="query.signInstType === 'BANK'"
        >
          <a-select-option  v-for="d in signInstIdOrgList" :key="d.id">
            {{d.id}}-{{d.name}}
          </a-select-option>
        </a-select>
        <a-select
          label="收单机构"
          inputType="select"
          v-model="query.signInstIdAgent"
          prop="signInstIdAgent"
          @change="(value) => queryChange(value, 'signInstIdAgent')"
          v-if="query.signInstType === 'AGENT'"
        >
          <a-select-option v-for="d in signInstIdAgentList" :key="d.id">
          {{d.id}}-{{d.name}}
        </a-select-option> </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
      <a-form-model-item class="search">
        <a-button type="primary" @click="search(1)" >搜索</a-button>
        <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
      </a-form-model-item>
      </a-col>
    </template>
    <div class="section">
      <div class="btn-group">
        <a-button
          type="primary"
          @click="openModal()"
          v-hasPermission="['managerInfo:add']"
        >
          <a-icon type="plus" />
          <span>增加</span>
        </a-button>
        <a-button
          type="primary"
          @click="upload"
          v-hasPermission="['managerInfo:import']"
        >
          <a-icon type="plus" />
          <span>导入</span>
        </a-button>
        <a-button
          type="primary"
          @click="gridExport"
          v-hasPermission="['managerInfo:export']"
        >
          <a-icon type="plus" />
          <span>导出</span>
        </a-button>
      </div>
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        @change="pageChange"
        @showSizeChange="pageChange"
        :loading="loading"
        :pagination="pagination"
        :scroll="{ x: 2200 }"
      >
        <template slot="operation" slot-scope="text, record">
          <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" v-if="record.userStatus !== '01'" title="修改" v-has-permission="['managerInfo:update']"></a-icon>
          <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="view(record)" title="详情" v-has-permission="['managerInfo:view']"></a-icon>
          <a-icon type="delete" @click="cancel(record)" theme="twoTone" twoToneColor="#4a9ff5" title="注销" v-hasPermission="['managerInfo:delete']" v-if="record.userStatus !== '01'"></a-icon>
          <a-badge
            status="warning"
            text="无权限"
            v-has-no-permission="[
              'managerInfo:view',
              'managerInfo:update',
              'managerInfo:delete',
            ]"
          ></a-badge>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model="modalVisible"
      :title="modalTitle"
      width="1050px"
      @ok="submit"
      :maskClosable="false"
      :footer="isHideFoot?null:undefined"
    >
      <manager-info-operation ref="modalForm" />
    </a-modal>
    <a-modal :maskClosable="false" v-model="uploadModalVisible" title="导入" @ok="handleUpload" okText="导入">
      <a-card :bordered="false">
        <a-col span="12">
          <a-upload class="upload-area" :file-list="fileList" :disabled="fileList.length === 1" :customRequest="selfUpload">
            <a-button>
              <a-icon type="upload"/>
              选择.xlsx文件
            </a-button>
            <a-tooltip placement="bottom"  v-if="fileList.length === 1">
              <template slot="title">
                <span>清除</span>
              </template>
              <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="handleRemove" />
            </a-tooltip>
          </a-upload>
        </a-col>
        <a-col span="12">
          <a-button type="primary" @click="downloadTemplate"><span>下载导入模板</span></a-button>
        </a-col>
      </a-card>
    </a-modal>
  </base-view>
</template>

<script>
import ManagerInfoOperation from "./ManagerInfoOperation";

export default {
  name: "ManagerInfo",
  components: { ManagerInfoOperation },
  data() {
    return {
      beanInfo: {},
      modalVisible: false,
      modalTitle: "",
      signInstIdOrgList:[],
      signInstIdAgentList:[],
      isHideFoot: false,
      operationType: "add",
      query: { instId: "", agentCode: "", agentName: "", manageInstId: "" ,signInstIdOrg:"",signInstIdAgent:""},
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      columns: [
        {
          title: "银行代码",
          dataIndex: "instId",
          width: 120,
        },
        {
          title: "拓展经理角色",
          dataIndex: "roleType",
          width: 120,
          customRender: (text, row, index) => {
            switch (text) {
              case "40":
                return "拓展经理";
              case "41":
                return "拓展经理审核员";
            }
          },
        },
        {
          title: "姓名",
          dataIndex: "managerName",
          width: 120,
        },
        {
          title: "手机号",
          dataIndex: "managerPhone",
          width: 120,
        },
        {
          title: "员工号",
          dataIndex: "managerId",
          width: 200,
        },
        {
          title: "收单机构类型",
          dataIndex: "signInstType",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "BANK":
                return "银行";
              case "AGENT":
                return "代理商";
            }
          },
        },
        {
          title: "收单机构",
          dataIndex: "remark1",
          width: 200,
        },
        {
          title: "地区代码",
          dataIndex: "remark2",
          width: 200,
        },
        {
          title: "操作状态",
          dataIndex: "userStatus",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "正常";
              case "01":
                return "注销";
            }
          },
        },
        {
          title: "操作",
          scopedSlots: { customRender: "operation" },
          fixed: "right",
          width: 120,
        },
      ],
      dataSource: [],
      fileList: [],
      uploadModalVisible: false,
    };
  },
  methods: {
    async getBank() {
      try {
         await this.$get("/admin/merParam/UpmpOrganization/instIdOrganizationSelect2List", {
          q:encodeURIComponent(`&${this.query.instId}`)
        }).then((r) => {
          this.signInstIdOrgList=r.data.results;
        });

      } catch (e) {
        console.error(e);
      }
    },
    async getAgent() {
      try {
         await this.$get("/admin/merParam/agentInfo/agentCdSelect2List", {
          q:encodeURIComponent(`&${this.query.instId}`)
        }).then((r) => {
          let result = r.data.results;
          this.signInstIdAgentList=result;
        });
      } catch (e) {
        console.error(e);
      }
    },
    queryChange(value, param) {
      if(value === 'BANK'){
        this.query.signInstIdAgent=null
        this.getBank()
      }else if(value === 'AGENT'){
        this.query.signInstIdOrg=null
        this.getAgent()
      }
      this.query[param] = value;
      this.search(1)
    },
    importChange() {},
    exportChange() {},
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.pageNum = 1;
        await this.search(1);
      }
    },

    async reset(){
      this.query = {instId:this.query.instId}
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    async search(e) {
if(e==1){
  try {
    // debugger
    this.query;
    const res = await this.$get("/admin/merParam/managerInfo/list", {
      instId: this.query.instId,
      roleType: this.query.roleType,
      managerName: this.query.managerName,
      managerPhone: this.query.managerPhone,
      managerId: this.query.managerId,
      userStatus: this.query.userStatus,
      signInstType: this.query.signInstType,
      signInstIdOrg: this.query.signInstIdOrg,
      signInstIdAgent: this.query.signInstIdAgent,
      pageNum: this.pagination.pageNum,
      pageSize: this.pagination.pageSize,
    });
    this.dataSource = res.data.rows;
    this.$set(this.pagination, "total", +res.data.total);

  } catch (e) {
    console.error(e);
  }
}else {
  try {
    this.query.roleType=null
     this.query.managerName=null
      this.query.managerPhone=null
       this.query.managerId=null
      this.query.userStatus=null
      this.query.signInstType=null
     this.query.signInstIdOrg=null
       this.query.signInstIdAgent=null
    this.signInstIdAgentList=null
    this.signInstIdOrgList=null
    const res = await this.$get("/admin/merParam/managerInfo/list", {
      instId: this.query.instId,
      pageNum: this.pagination.pageNum,
      pageSize: this.pagination.pageSize,
    });
    this.dataSource = res.data.rows;
    this.$set(this.pagination, "total", +res.data.total);
  } catch (e) {
    console.error(e);
  }
}

    },
    openModal(type = "add", beanInfo) {
      this.modalTitle = {
        add: "新增",
        edit: "编辑",
        view: "详情",
        cancel: "注销",
      }[type];
      this.modalVisible = true;
      if(type === 'view'){
        this.isHideFoot = true;
      }else{
        this.isHideFoot = false
      }
      this.$nextTick(() => {
        this.$refs.modalForm.setOperatorType(type);
        this.$refs.modalForm.setBeanInfo(beanInfo, this.query.instId);
        this.$refs.modalForm.resetFields();
      });
    },
    async edit(item) {
      this.openModal("edit", item);
    },
    view(item) {
      this.openModal("view", item);
    },
    cancel(item) {
      this.openModal("cancel", item);
    },

    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;
      this.search(1);
    },

    async gridExport(){
      const res = await this.$download("/admin/merParam/managerInfo/gridExport", {
        instId: this.query.instId,
        roleType: this.query.roleType,
        managerName: this.query.managerName,
        managerPhone: this.query.managerPhone,
        managerId: this.query.managerId,
        userStatus: this.query.userStatus,
        signInstType: this.query.signInstType,
        signInstId: this.query.signInstId,
        exportFlag: "ManagerInfoExportFlag",
      }, '导出拓展经理.xls');
    },
    downloadTemplate() {
      this.$download('/admin/merParam/managerInfo/getTemplate', {}, '拓展经理导入模板.xls')
    },
    upload() {
      this.uploadModalVisible = true
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    selfUpload({action, file, onSuccess, onError, onProgress}) {
      this.fileList = [...this.fileList, file]
    },
    handleUpload() {
      const {fileList} = this
      const formData = new FormData()
      formData.append('excelFile', fileList[0])
      formData.append('instId', this.query.instId)
      this.$upload('/admin/merParam/managerInfo/upload', formData).then((r) => {
        this.$message.success(r.data.message)
        this.fileList = []
      }).catch((r) => {
        console.error(r)
        this.fileList = []
        this.$message.error(r.data.message)
      })
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../static/less/Common";
.input-box {
  width: 200px;
}
</style>
